<template>
  <div class="import-read-dialog">
    <MyDialog :show="isShowAddAddress" @beforeClose="beforeClose">
      <div slot="title">
        <p>{{ title }}</p>
      </div>

      <template #body>
        <el-row>
          <el-col :span="22">
            <div class="grid-content">
              <el-form
                :model="dataForm"
                :rules="rulesForm"
                label-width="100px"
                size="small"
                ref="addressForm"
              >
                <el-form-item label="所在地区" prop="areaCode">
                  <el-cascader
                    :options="options"
                    v-model="dataForm.areaCode"
                    @change="handleChange"
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    placeholder="请输入详细地址"
                    v-model="dataForm.address"
                    clearable
                    maxlength="40"
                  ></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="fullName">
                  <el-input
                    placeholder="请输入联系人"
                    v-model="dataForm.fullName"
                    clearable
                    maxlength="20"
                  ></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="mobile">
                  <el-input
                    placeholder="请输入联系方式"
                    v-model="dataForm.mobile"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="设为默认" prop="isDefault">
                  <el-switch
                    v-model="dataForm.isDefault"
                    active-value="1"
                    inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </template>

      <div slot="footer">
        <span>
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="submit('addressForm')"
            :loading="btnLoading"
            >确 定</el-button
          >
        </span>
      </div>
    </MyDialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { updateAddress } from "../../../api/member/address";
import { checkPhone } from "../../../utils/common";
export default {
  name: "AddressEdit",
  props: {
    title: {
      type: String,
      default: "添加地址",
    },
    isShowAddAddress: {
      type: Boolean,
      default: false,
    },
    rowInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    isShowAddAddress() {
      if (this.isShowAddAddress) {
        if (this.rowInfo?.id) {
          this.dataForm.areaCode = this.rowInfo.province
            ? [
                this.rowInfo.province.toString(),
                this.rowInfo.city.toString(),
                this.rowInfo.area.toString(),
              ]
            : [];
          this.dataForm.province = this.rowInfo.province;
          this.dataForm.city = this.rowInfo.city;
          this.dataForm.area = this.rowInfo.area;
          this.dataForm.address = this.rowInfo.address;
          this.dataForm.fullName = this.rowInfo.fullName;
          this.dataForm.fullArea = this.rowInfo.fullArea;
          this.dataForm.mobile = this.rowInfo.mobile;
          this.dataForm.isDefault = String(this.rowInfo.isDefault);
          this.dataForm.id = this.rowInfo.id;
        } else {
          this.dataForm.id = "";
        }
      } else {
        this.dataForm = {
          mobile: "",
          fullName: "",
          province: "",
          city: "",
          area: "",
          address: "",
          fullArea: "",
          areaCode: [],
          isDefault: "0",
        };
      }
    },
  },
  data() {
    return {
      options: this.getPermitArea(),
      btnLoading: false,
      dataForm: {
        mobile: "",
        fullName: "",
        province: "",
        city: "",
        area: "",
        address: "",
        fullArea: "",
        areaCode: [],
        isDefault: "0",
      },
      rulesForm: {
        mobile: [
          { required: true, message: "请输入联系方式" },
          { validator: checkPhone, trigger: ["blur", "change"] },
        ],
        fullName: [{ required: true, message: "请输入联系人姓名" }],
        address: [{ required: true, message: "请输入详细地址" }],
        areaCode: [{ required: true, message: "请选择省市区" }],
      },
    };
  },
  methods: {
    // 获得业务所属地区，展示
    getPermitArea() {
      // 320000 - 江苏  310000 - 上海  330000 - 浙江 340000 - 安徽
      let permitProvince = regionData.filter(
        (e) =>
          e.value == "310000" ||
          e.value == "320000" ||
          e.value == "330000" ||
          e.value == "340000"

          // 330000   340000
      );
      permitProvince.map((e) => {
        // if (e.value == "330000") {
        //   e.children = e.children.filter((m) =>
        //     ["330100", "330200", "330400", "330500"].includes(m.value)
        //   );
        // }
        // if (e.value == "340000") {
        //   e.children = e.children.filter((m) => [].includes(m.value));
        // }
        // 去掉第一个 市辖区
        if (e.value == "320000" || e.value == "330000" ) {
          e.children.map(m => {
            delete m.children[0]
          })
        }
      });

      return permitProvince;
    },

    // 省市区变化
    handleChange(value) {
      this.dataForm.areaCode = value;
      this.dataForm.province = value[0];
      this.dataForm.city = value[1];
      this.dataForm.area = value[2];
      this.dataForm.fullArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
    },
    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const data = {
            ...this.dataForm,
          };
          updateAddress(data)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.btnLoading = false;
              this.$emit("closeDialog");
            })
            .catch((err) => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 关闭弹窗- 右侧 X
    beforeClose() {
      this.$emit("closeDialog");
    },
  },
};
</script>
